import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
//初始化时用sessionStore.getItem('token'),这样子刷新页面就无需重新登录
// 准备 state 对象 -- 保存具体的数据
const state = {
  token: window.sessionStorage.getItem('token'),
  username: ''
};

//  准备 mutations 对象 -- 修改 state 中的数据
const mutations = {
  LOGIN: (state, data) => {
    // 更改 token 的值
    state.token = data
    window.sessionStorage.setItem('token', data)
  },
  USERNAME: (state, data) => {
    // 把用户名保存起来
    state.username = data
    window.sessionStorage.setItem('username', data)
  }  
};
// 准备 actions 对象 -- 响应组件中用户的动作
const actions = {
  UserLogin({ commit }, data) {
    commit('LOGIN', data)
  },
  // commit 提交；data 即为点击后传递过来的参数，此时是 'LOGIN'
  UserName({ commit }, data) {
    commit('USERNAME', data)
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})



/**
 * 多组件的中状态改变之dispatch 和 commit 的用法和区别
 * vue store存储commit 和dispatch
 * dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)
 * commit：同步操作，写法：this.$store.commit('mutations方法名',值)
 */




 




